<template>
  <u-tabbar
    :value="value"
    @change="change"
    zIndex="999999"
    inactiveColor="#333333"
    activeColor="#56CB03"
    customStyle="height: 63px;padding-top: 8px;padding-bottom: 5px;background: rgba(255,255,255,0.6);backdrop-filter: blur(16rpx);"
    :safeAreaInsetBottom="false"
  >
    <u-tabbar-item name="1" text="首页">
      <image
        class="slot-icon"
        mode="heightFix"
        slot="active-icon"
        src="../static/nav/select_nav_index.png"
      ></image>
      <image
        class="slot-icon"
        mode="heightFix"
        slot="inactive-icon"
        src="../static/nav/nav_index.png"
      ></image>
    </u-tabbar-item>
    <u-tabbar-item name="2"text="商城">
      <image
        class="slot-icon"
        mode="heightFix"
        slot="active-icon"
        src="../static/nav/select_nav_shop.png"
      ></image>
      <image
        class="slot-icon"
        mode="heightFix"
        slot="inactive-icon"
        src="../static/nav/nav_shop.png"
      ></image>
    </u-tabbar-item>
    <u-tabbar-item name="3" text="购物车" :badge="badge">
      <image
        class="slot-icon"
        mode="heightFix"
        slot="active-icon"
        src="../static/nav/select_nav_gwc.png"
      ></image>
      <image
        class="slot-icon"
        mode="heightFix"
        slot="inactive-icon"
        src="../static/nav/nav_gwc.png"
      ></image>
    </u-tabbar-item>
    <u-tabbar-item name="4" text="我的">
      <image
        class="slot-icon"
        mode="heightFix"
        slot="active-icon"
        src="../static/nav/select_nav_my.png"
      ></image>
      <image
        class="slot-icon"
        mode="heightFix"
        slot="inactive-icon"
        src="../static/nav/nav_my.png"
      ></image>
    </u-tabbar-item>
  </u-tabbar>
</template>

<script>
import { getCarCount } from '@/api/index'

export default {
  props: ['value'],
  data() {
    return {
      badge: 0,
    }
  },
  mounted() {
    if(uni.getStorageSync('token')) {
      this.getCarNum()
    }
  },
  methods: {
    getCarNum() {
      getCarCount({}).then(res => {
        this.badge = res.data
      })
    },
    change(i) {
      if(this.value == '') {
        return
      }
      if(!uni.getStorageSync('token')) {
        if(i == 1) {
          this.jumpTab('/pages/index/index')
        } else {
          this.jumpTo('/pages/login/login')
        }
        return
      }
      this.getCarNum()
      if(i == 1) {
        this.jumpTab('/pages/index/index')
      } else if(i==2) {
        this.jumpTab('/pages/shop/shop')
      } else if(i == 3) {
        this.jumpTab('/pages/gwc/gwc')
      } else if(i == 4) {
        this.jumpTab('/pages/my/my')
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.slot-icon {
  width: auto;
  height: 40rpx;
}
.u-tabbar-item__text {
  margin-top: 8rpx;
  font-size: 24rpx;
}
</style>
